<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>吸顶灯效果</title>
		<style>
			/* 顶部样式 */
			.top_context{
				height: 200px;
				background-color: #e0e0e0;
				text-align: center;
				line-height: 200px;
			}
			/* 吸顶灯内容元素初始效果 */
			.sticky_element{
				height: 50px;
				background-color: #333;
				text-align: center;
				line-height: 50px;
				color: #fff;
			}
			/* 页面主体区域 */
			.main_context{
				height: 8888px;
				background-color: #e0e0e0;
			}
			/* 切换样式：吸顶灯卡在页面顶部 */
			.sticky{
				position: fixed;
				top: 0;
				width: 100%;
			}
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
		<script>
			//ready()事件源语法：$(document).ready(function(){});
			//             简写：$(function(){});
			//总结：页面元素全部加载完毕，在执行JQ相关操作
			// script元素放在最后一个body位置【可不写】
			$(function(){
		   //吸顶灯效果---【了解】BOM案例：浏览器6个对象的方法使用
		   
		   //思路：1.鼠标滚动，滚动吸顶灯元素位置处，效果改变
		   //     2.页面顶部到吸顶灯位置：200px 大于200px
		   //     3.追加第一个样式：固定定位，页面顶部位置
		   
		   //     1.追加样式：吸顶灯卡在页面顶部
		   //     2.固定值：页面顶部到吸顶灯位置--BOM语法
		   //     3.固定值>滚动值，滚动范围超出200px 实现切换
		   
		   
		   
		   //offset()   获取或者设置元素相对与文档偏移量
		   //offset().top 从顶部到吸顶灯元素的偏移量
		   var se=$(".sticky_element").offset().top;
		   //滚动值：BOM对象+事件源
		   //$(window) 抓取页面window对象 监听窗口事件 创建改变 滚动
		   //理解：实时抓取页面滚动值
		   $(window).scroll(function(){
			   alert("测试是否滚动")
			   //滚动值：获取页面滚动的位置
			   //scrollTop()获取页面滚动垂直
			   var st= $(window).scrollTop();
			   
			   //判断 固定值大于滚动值，滚动超过200 实现切换 吸顶灯效果
			   if(st>se){
			   			   //条件成立 切换一个吸顶效果 
			   			   $(".sticky_element").addClass("sticky");
			   }else{
			   			   //条件不成立 小于200px
			   			   $(".sticky_element").removeClass("sticky");
			   }
		   });
		   
			});
			
		</script>
	</head>
	<body>
		<!-- 顶部内容：导航 -->
		<div class="top_context">顶部内容区域</div>
		<!-- 我是吸顶元素 -->
		<div class="sticky_element">我是吸顶元素</div>
		<!-- 页面主体内容 -->
		<div class="main_context">Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat odio incidunt, esse sit repudiandae dignissimos rerum perferendis minima at optio commodi cupiditate accusantium illum ratione mollitia minus quia dolorem hic!
		Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis odio placeat et, non eum, facilis assumenda dolores hic, consequuntur eaque inventore minima. Assumenda, mollitia! Aspernatur, aut. Nisi, ipsam! Dolores, veritatis?
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi repellat porro nemo est magni eligendi alias, voluptatum amet provident tempore iusto, sapiente delectus. Suscipit quidem autem sapiente magni est quisquam!
		Lorem ipsum dolor sit, amet consectetur adipisicing elit. Excepturi est beatae, laudantium praesentium illo in dolores tenetur maiores molestiae ipsum consequuntur dolore quasi numquam officiis sed. Distinctio veniam similique a?
		
		</div>
	</body>
</html>